<template>
  <a-modal :visible="showCode" :destroyOnClose="true" title="二维码" :footer="false" @cancel="showCode = false">
    <div class="code-content">
      <div class="code">
        <div v-if="codeData.codeUrl">
          <img :src="codeData.codeUrl" alt="" />
          <span>小程序二维码</span>
        </div>
        <div v-if="codeData.qrcodeUrl"><img :src="codeData.qrcodeUrl" alt="" /><span>公众号二维码</span></div>
      </div>
      <p v-if="codeData.path">小程序路径：{{ codeData.path }}?scene={{ codeData.code }}</p>
    </div>
  </a-modal>
</template>
<script>
export default {
  data() {
    return {
      showCode: false,
      codeData: {}
    }
  },
  methods: {
    show(data) {
      this.codeData = data
      this.showCode = true
    }
  }
}
</script>
<style lang="less" scoped>
.code-content {
  p {
    margin-top: 24px;
  }
  .code {
    display: flex;
    justify-content: center;

    div:first-child {
      margin-right: 48px;
    }
    img {
      display: block;
      margin: 0 auto 12px;
      width: 120px;
      height: 120px;
      object-fit: scale-down;
      background: #fff;
    }
    span {
      text-align: center;
      width: 100%;
      display: block;
    }
  }
}
</style>

